<template>
  <view class="search">
    <search bgColor='black'>
      <blockquote @click='goBack' slot="leftMain">
        <u-icon slot="leftMain" name="arrow-left" color="white" size="28"></u-icon>
      </blockquote>
      <blockquote slot="centerMain">
        <u--input focus color='white' @change="searchShow=false"
          customStyle="width: calc(100vw - 200rpx);borderRadius:20rpx; background:rgba(0,0,0,0.5)" placeholder="请输入搜索内容"
          prefixIcon="search" v-model="iptValue" clearable prefixIconStyle="font-size: 44rpx;color: #909399">
        </u--input>
      </blockquote>
      <blockquote slot="rightMain">
        <text @click="search" class="sbtn">搜索</text>
      </blockquote>
    </search>
    <view v-show="iptValue && searchShow" class="history">
      <view v-for="e in searchList" @click="goDetail(e)" :key='e._id' class="item">
        <u-icon size='28' color='white' name="search"></u-icon>
        <text>{{e.title}}</text>
        <u-icon size='28' color='white' name="arrow-right"></u-icon>
      </view>
    </view>
    <view v-show="!iptValue && searchInfo.length!=0" class="history1">
      <view class="title">
        <text>搜索历史</text>
        <u-icon @click='delState=true' v-show="!delState" size='28' color='white' name="trash"></u-icon>
        <view v-show="delState" class="del">
          <text @click="cdelsearchlog()">全部删除</text>
          <text @click='delState=false'>完成</text>
        </view>
      </view>
      <view class="content">
        <view v-for="e in searchInfo" :key="e._id" class="item">
          <text @click="iptValue=e.title" class="inner"> {{e.title}}</text>
          <u-icon @click="cdelsearchlog(e._id)" v-show='delState' size='24' color='white' name="close"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import search from '@/component/search/search.vue'
  import {
    mapState,
    mapMutations
  } from "vuex"

  import {
    getSearchData
  } from "@/api/getnews.js"
  import {
    getsearchlog,
    addsearchlog,
    delsearchlog,
    addhistory
  } from "@/api/user.js"
  export default {
    data() {
      return {
        iptValue: "",
        searchList: [],
        delState: false,
        searchShow: false
      }
    },
    components: {
      search
    },
    computed: {
      ...mapState("m_login", ["searchInfo"])
    },
    onReady() {
      getsearchlog().then(res => {
        console.log(res);
        this.setSearchInfo(res.data)
      })
    },
    methods: {
      ...mapMutations("m_test", ["setDetailInfo"]),
      ...mapMutations("m_login", ["setSearchInfo"]),
      goBack() {
        this.$Router.back()
      },
      cdelsearchlog(id) {
        delsearchlog({
          id: id
        }).then(res => {
          getsearchlog().then(res => {
            console.log(res);
            this.setSearchInfo(res.data)
          })
        })
      },
      caddhistory(id) {
        addhistory({
          behistoryid: id
        }).then(res => {
          console.log(res);
        })
      },
      goDetail(e) {
        this.setDetailInfo(e)
        this.caddhistory(e._id)
        this.$Router.push(`/subpkg/newsDetail/newsDetail`)
      },

      search() {
        if (!this.iptValue) {
          return uni.$u.toast('请输入搜索内容')
        }
        this.searchShow = true
        getSearchData({
          iptvalue: this.iptValue
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            if (res.data.length == 0) {
              return uni.$u.toast('暂无此信息')
            }
            this.searchList = res.data
            addsearchlog({
              title: this.iptValue
            }).then(res => {
              if (res.code == 200) {
                console.log('添加成功');
                getsearchlog().then(res => {
                  this.setSearchInfo(res.data)
                })
              }
            })
          } else {
            console.log(res);
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    width: 100vw;
    height: 100vh;
    background-color: black;
  }

  .sbtn {
    color: #c00000;
    font-size: 24rpx;
    font-weight: 600;
  }

  .history1 {
    width: 100vw;
    height: auto;
    padding: 0 20rpx;
    box-sizing: border-box;
    color: white;

    .title {
      font-size: 26rpx;
      display: flex;
      justify-content: space-between;

      .del {
        width: 170rpx;
        display: flex;
        justify-content: space-between;
      }
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      margin: 20rpx auto;


      .item {
        width: calc(50% - 20rpx);
        height: 60rpx;
        line-height: 60rpx;
        font-weight: 600;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        padding-right: 20rpx;

        .inner {
          display: inline-block;
          width: 300rpx;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }

  .history {
    width: 100vw;
    height: calc(100vh - 500rpx);
    background-color: black;
    margin: 0 auto;
    color: white;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    // align-content: space-between;
    // align-items: center;

    .item {
      width: 100%;
      height: 80rpx;
      padding: 0 20rpx;
      box-sizing: border-box;
      display: flex;
      border-bottom: 2rpx solid gray;
      font-size: 24rpx;
      align-items: center;
      justify-content: space-between;


      text {
        text-align: left;
        display: flex;
        justify-content: flex-start;
        // display: inline-block;
        margin: 0 20rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        box-sizing: border-box;
      }
    }
  }
</style>
